import React, {Component} from 'react'
import {Text, View, Image, ScrollView} from 'react-native'

var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');
var image = require('../image/icon_tabbar_misc.png');

var uri = 'https://api.1000classes.com/youpinserver/indexPageAppNew.do?fuserid=&flang=0';
var BannerData = require('../../Banner.json');

var TimerMixin = require('react-timer-mixin');

class FindMainView extends Component {
    // constructor(props) {
    //     super(props)
    //     //初始化的方法
    //
    // }
    // static navigationOptions = ({navigation}) => ({
    //     // 展示数据 "`" 不是单引号
    //     title: `Chat with ${navigation.state.params.name}`,
    //
    // }

    constructor(props) {
        super(props);
        this.state = {
            bannerData: [],
            currpentPage: 0,
        };

        mixins:[TimerMixin];
    }

    componentDidMount() {
        fetch(uri)
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    bannerData: responseJson.map.list,
                    // bannerData: BannerData.map.list,
                })
            })
            .catch((error) => {
                /**解析数据 */
                this.setState({
                    bannerData: BannerData.map.list,
                });
                console.error(error);
            })
    }


    render() {
        return (
            <View>
                <Text>{'banner图片'}</Text>
                <View>
                    <ScrollView ref='ScrollView' horizontal={true} showsHorizontalScrollIndicator={false}
                                pagingEnabled={true}
                                onMomentumScrollEnd={(e) => this.onAnimationEnd(e)}>
                        {this.getBannerItemView()}
                    </ScrollView>
                    <View style={{
                        backgroundColor: 'rgba(0,0,0,0.2)',
                        width: width,
                        height: 30,
                        alignItems: 'center',
                        position: 'absolute',
                        bottom: 0,
                        flexDirection: 'row',
                        paddingLeft: 12,
                    }}>
                        {this.getPointView()}
                    </View>
                </View>
                <Text>{'发现首页'}</Text>
                <Text>{'网络图片:'}</Text>
                <Image
                    source={{uri: 'http://api.1000classes.com/youpinserver/attachment/2018-04/fb8ee3a3-4613-4d8a-97ce-a9b1d784aff4.jpg'}}
                    style={{width: width, height: 200, backgroundColor: 'green'}}/>

                <Text>{'本地图片:'}</Text>
                <Image source={image}
                       style={{width: width, height: 200, backgroundColor: 'yellow'}}/>
            </View>
        )


    }

    getBannerItemView() {
        var child = [];
        const datasource = this.state.bannerData;
        for (var i = 0; i < datasource.length; i++) {
            child.push(
                <View key={i}>
                    <Image source={{uri: datasource[i].fstorename}} style={{width: width, height: 150}}/>
                </View>
            );
        }

        return child;
    }


    getPointView() {
        var chidPoint = [];
        const datasource = this.state.bannerData;
        for (var i = 0; i < datasource.length; i++) {

            style = (i == this.state.currpentPage) ? {color: 'orange'} : {color: '#ffffff'};
            chidPoint.push(
                <Text key={i} style={[{fontSize: 40}, style]}>&bull;</Text>
            );
        }
        return chidPoint;
    }

    // 当一帧滚动完成

    onAnimationEnd(e) {
        var offsetX = e.nativeEvent.contentOffset.x;

        var current = Math.floor((offsetX+10) / width);
        this.setState({
            currpentPage: current
        });
        // console.log(current);
        // alert(current+' '+offsetX+' '+width);

    }


}

module.exports = FindMainView;